<template>
  <div class="collect-page">
    <div class="nav">
      <van-nav-bar left-text="返回" left-arrow @click-left="$router.go(-1)" />
      <van-search placeholder="请输入小区或地址" @search="onSearch" show-action >
        <template #label>
          <span @click="$router.push('/city')" class="right-location">{{city}} ▼</span>
        </template>
        <template #action>
          <div @click="onSearch">
            <van-icon name="map-marked" />
          </div>
        </template>
      </van-search>
    </div>

      <!-- 方式 -->
    <Navselect></Navselect>
    <div class="houselist">
 <van-list
   v-model="loading"
   :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
>
  <HouseList :houserList="houserListData"></HouseList>
</van-list>
    </div>
  </div>
</template>

<script>
import { listItem } from '@/api/listItem'
import { getTokenID } from '@/utils/stroageid'
import HouseList from '@/components/houselist.vue'

export default {
  name: 'collect-page',
  components: {
    HouseList
  },
  data () {
    return {
      active: '',
      loading: false,
      finished: false,
      city: '北京',
      houserListData: {},
      parameter: {
        cityId: '',
        stat: 1,
        end: 20,
        rentType: null,
        price: null
      }
    }
  },

  async created () {
    this.city = localStorage.getItem('city')
  },
  methods: {
    // 功能
    /* 获取房屋列表信息 */
    onSearch () {
      console.log('地图功能还未实现')
    },
    open (id) {
    },

    async onLoad () {
      /* count */
      this.parameter.cityId = getTokenID()

      const { body } = await listItem(this.parameter)
      body.list.forEach(item => {
        item.houseImg = 'http://liufusong.top:8080' + item.houseImg
      })

      this.houserListData = { ...this.houserListData, ...body.list }
      this.loading = false

      // 数据全部加载完成
      this.parameter.stat += 1
      this.parameter.end += 20

      if (this.parameter.end >= 200) (this.finished = true)
      // 加载状态结束
    }
  },
  watch: {
    houserListData: {
      deep: true,
      handler (newVal, oldVal) {
        if (newVal) {
          return this.$toast.loading({
            message: '加载中...',
            forbidClick: false
          })
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
.collect-page{
  position: relative;
}
.van-search {
  position: absolute;
  top: 7px;
  width: 90%;
  padding: 0 10px;
  z-index: 1;
  margin-left: 30px;
}
.dropdown-menu{
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #ccc;
  padding-top: 8px;
  padding-bottom: 8px;
  div{
    height: 20px;
    font-size: 17px;
    span{
      font-size: 10px;
    }
    &.artive{
      color: green;
    }
  }
}
</style>
